<template>
    <div class="left">
        <h3>人员数据</h3>
        <SceneTree :sceneTree="sceneTree"></SceneTree>
        <hr />
        <h3>创建对象</h3>
        <button @click="createPerson">创建人员</button>

    </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue"
import getMyProjectManager from '@/scripts/getMyProjectManager';
import SceneTree from "vue-xe2-plugin/dist-node/components/xe2/common/SceneTree/SceneTree.vue"
import { ESHuman } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const myProjectManager = getMyProjectManager();


myProjectManager._personCollection.show = true

// 存储所有的可视化对象
var sceneObjects = []

// 结构树
const sceneTree = myProjectManager.getSceneTree("personSceneTree")

// 创建人员
const createPerson = () => {
    var human = myProjectManager.createSceneObject(ESHuman)
    human.editing = true
    human.mode = "pedestrian"
    human.animation = "running"
    sceneObjects.push(human)
}

// 销毁所有对象
const destroySceneObject = () => {
    if (sceneObjects.length > 0) {
        sceneObjects.forEach(item => {
            myProjectManager.destroySceneObject(item)
            item = undefined
        })
        sceneObjects.length = 0
    }
}

onUnmounted(() => {
    destroySceneObject()
    myProjectManager._personCollection.show = false
})




</script>

<style scoped>
.left {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>